<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import { setMapInstance } from '@/utils/mapUtils'
import CoordinatePickerControl from '@/components/CoordinatePickerControl.vue'
import CoordinatePicker from '@/utils/CoordinatePicker'

const mapContainer = ref<HTMLElement | null>(null)
const mapInstance = ref<mapboxgl.Map | null>(null)

mapboxgl.accessToken = import.meta.env.VITE_APP_MAP_TOKEN

onMounted(() => {
  if (!mapContainer.value) return
  
  const map = new mapboxgl.Map({
    container: mapContainer.value,
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [116.399428, 39.90923],
    zoom: 13
  })

  map.on('load', () => {
    mapInstance.value = map
    setMapInstance(map)
    // 添加坐标拾取器控件
    new CoordinatePicker(map)
  })
})

onUnmounted(() => {
  mapInstance.value?.remove()
})
</script>

<template>
  <div class="map-container">
    <div id="map" ref="mapContainer"></div>
    <!-- <CoordinatePickerControl 
      v-if="mapInstance"
      :map="mapInstance"
    /> -->
  </div>
</template>

<style scoped>
.map-container {
  width: 100%;
  height: 100vh;
}

#map {
  width: 100%;
  height: 100%;
}
</style>